<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .right {
            width: 48%;
            float: right;
        }

        .left {
            width: 48%;
            float: left;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>
</head>

<body>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend id="yingyuan">
            <button data-target="../Cinema/select.html" class="layui-btn layui-btn-sm" id="back">返回</button>
            <span id="spanTitle"></span>
        </legend>
    </fieldset>

    <div class="left layui-inline">
        <h2 style="text-align:center; margin: 15px 0; color:#1E9FFF">当前院线已上映电影表</h2>
        <table id="left-table"></table>

    </div>
    <div class="right  layui-inline">
        <h2 style="text-align:center; margin: 15px 0; color:#FF5722">当前院线未上映电影表</h2>

        <table id="right-table" lay-filter="test"></table>

    </div>

    <script src="../../js/lodash.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script type="text/html" id="toolbarDemoLeft"></script>



    <script>

        //获取地址栏参数
        function query(url) {
            const parst = url.split("?");
            if (parst.length == 1) {
                return {};
            }
            const obj = {};
            parst[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                obj[p] = decodeURIComponent(v);
            })
            return obj;
        }
        const cinemaObj = query(location.href);
        let cinemaId = cinemaObj.id;
        let table;
        layui.use('table', function () {
            table = layui.table;
            //已上映
            table.render({
                elem: '#left-table'
                , url: '/api/MovieAndCinema/' + cinemaId //数据接口
                , toolbar: "#left-table"
                , page: true//开启分页
                , parseData: function (res) { //res 即为原始返回的数据
                    console.log(res)
                }
                , cols: [
                    [
                        {
                            title: ' 名称'
                            , templet: `<div>{{d.movie.name}}</div>`

                        },
                        {
                            title: '类型'
                            , templet: `<div>{{d.movie.type}}</div>`
                        },
                        {
                            title: '时长'
                            , templet: `<div>{{d.movie.time}}</div>`
                        },
                        {
                            title: '评分'
                            , templet: `<div>{{d.movie.score}}</div>`
                        },
                        {
                            title: '操作',
                            templet: '<div class="layui-btn-container"><button class="layui-btn" onclick="AddCount(`{{d.movie._id}}`,`{{d.movie.name}}` ,`{{d.screens.length}}`,`{{d._id}}`,this)"><span id="movieCount">{{d.screens.length}}</span>个场次</button> <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delMovie(`{{d.movie._id}}`, this)">下映</div>',
                            width: "28%",
                        }
                    ]
                ]
            });

            //未上映
            table.render({
                elem: '#right-table'
                , url: '/api/MovieAndCinema/unshow/' + cinemaId  //数据接口
                , page: true //开启分页
                , toolbar: "#right-table"
                , toolbar: "#id"
                , cols: [
                    [
                        {
                            field: 'name',
                            title: '名称'
                        },
                        {
                            field: 'type',
                            title: '  类型'
                        },
                        {
                            field: 'time',
                            title: '时长'
                        },
                        {
                            field: 'score',
                            title: '评分'
                        },
                        {
                            title: "操作",
                            templet: '<div class="layui-btn-container"><button class="layui-btn layui-btn-normal" onclick="Release(`{{d._id}}`,this)">上映<tton></div>',

                        }
                    ]
                ]
            });
        });

        //查询
        function chaxun(key) {
            layui.table.reload(`right-table`, {
                where: {
                    key,
                    page: 1,
                },
                page: {
                    curr: 1  //重新设置第一页
                }
            });
        }
        //返回
        let back = document.getElementById("back");
        back.onclick = function () {
            location.href = "../Cinema/select.html";
        }
        //下映
        function delMovie(id, btn) {
            layer.confirm('确定下映吗？', function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema/" + id,   //该电影的id
                    method: "delete",
                });
                $(btn).parents("tr").remove();
                layer.close(index);
                table.reload('right-table', {
                    url: '/api/MovieAndCinema/unshow/' + cinemaId
                });
            });
        }
        //上映
        function Release(id, btn) {
            let data = {
                movieid: id,
                cinemaid: cinemaId
            }
            layer.confirm('确定上映电影', {
                icon: 0,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema",
                    method: "post",
                    data,
                    success: function () {
                        $(btn).parents("tr").remove();
                        layer.close(index);
                        location.href = "./select.html?id=" + cinemaId;
                    }
                });
            });
        }

        function AddCount(id, name, screens, mid, btn) {
            layer.open({
                title: ['电影：' + name, 'font-size:18px;'],
                type: 2,
                content: './addcount.html?' + "id=" + id + "&cid=" + cinemaId + "&mid=" + mid,
                area: ['800px', '450px'],
                end: function () {
                    location.href = "./select.html?id=" + cinemaId;
                }
            });
        }
        async function cine() {
            const c = await $.getJSON("/api/Cinema/" + cinemaId);
            $("#spanTitle").text(c.data.name);
        }
        cine()
    </script>
    <script type="text/html" id="id">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="tel" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit   onclick="chaxun($('#txtKey').val())">查询</button>
        </div>
    </div>
</script>

</body>

</html>